import {
  ProForm,
  ProFormCascader,
  ProFormText,
  ProFormTreeSelect,
} from "@ant-design/pro-components";
import { message } from "antd";

import React from "react";

const Page5: React.FC = () => {
  const cascaderOptions = [
    {
      value: "beijing",
      label: "北京",
      children: [
        {
          value: "chaoyang",
          label: "朝阳区",
          children: [
            { value: "sanlitun", label: "三里屯" },
            { value: "guomao", label: "国贸" },
          ],
        },
        {
          value: "haidian",
          label: "海淀区",
          children: [
            { value: "zhongguancun", label: "中关村" },
            { value: "wudaokou", label: "五道口" },
          ],
        },
      ],
    },
    {
      value: "shanghai",
      label: "上海",
      children: [
        {
          value: "huangpu",
          label: "黄浦区",
          children: [
            { value: "nanjinglu", label: "南京路" },
            { value: "waitan", label: "外滩" },
          ],
        },
      ],
    },
  ];

  const treeData = [
    {
      title: "技术部",
      value: "tech",
      children: [
        {
          title: "前端组",
          value: "frontend",
          children: [
            { title: "React组", value: "react" },
            { title: "Vue组", value: "vue" },
          ],
        },
        {
          title: "后端组",
          value: "backend",
          children: [
            { title: "Java组", value: "java" },
            { title: "Python组", value: "python" },
          ],
        },
      ],
    },
    {
      title: "产品部",
      value: "product",
      children: [
        { title: "产品设计", value: "design" },
        { title: "产品运营", value: "operation" },
      ],
    },
  ];

  const handleSubmit = async (values: any) => {
    console.log("表单数据:", values);
    message.success("提交成功！");
  };

  return (
    <div style={{ padding: 24 }}>
      <h1>级联选择表单</h1>
      <ProForm
        onFinish={handleSubmit}
        layout="vertical"
        style={{ maxWidth: 600 }}
      >
        <ProFormText
          name="name"
          label="姓名"
          placeholder="请输入姓名"
          rules={[{ required: true, message: "请输入姓名" }]}
        />

        <ProFormCascader
          name="address"
          label="地址"
          options={cascaderOptions}
          placeholder="请选择地址"
          rules={[{ required: true, message: "请选择地址" }]}
        />

        <ProFormTreeSelect
          name="department"
          label="部门"
          fieldProps={{
            treeData,
            placeholder: "请选择部门",
            treeDefaultExpandAll: true,
          }}
          rules={[{ required: true, message: "请选择部门" }]}
        />
      </ProForm>
    </div>
  );
};

export default Page5;
